@extends('Index/vip/vip_base')
@section('con-right')
	<div class="pull-right">
		<div class="user-content__box clearfix bgf">
			<div class="title">账户信息-收货地址</div>
			<form action="/index/vip/udai_address_insert" class="user-addr__form form-horizontal" method="post" role="form" id="form" onsubmit="return false">
				<p class="fz18 cr">新增收货地址<span class="c6" style="margin-left: 20px">电话号码、手机号码选填一项，其余均为必填项</span></p>
				<div class="form-group">
					<label for="name" class="col-sm-2 control-label">收货人姓名：</label>
					<div class="col-sm-6">
						<input class="form-control" name="name" id="name" placeholder="请输入姓名" type="text" required="">
					</div>
				</div>
				<div class="form-group">
					<label for="details" class="col-sm-2 control-label">收货地址：</label>
					<div class="col-sm-10">
						<div class="addr-linkage">
							<select name="province"></select>
							<select name="city"></select>
							<select name="area"></select>
							<select name="town"></select>
						</div>
						<input class="form-control" name="details" id="details" placeholder="建议您如实填写详细收货地址，例如街道名称，门牌号码等信息" maxlength="30" type="text" required="">
					</div>
				</div>
				<div class="form-group">
					<label for="mobile" class="col-sm-2 control-label">手机号码：</label>
					<div class="col-sm-6">
						<input class="form-control" name="tel" id="tel" placeholder="请输入手机号码" type="text" required="">
					</div>
				</div>
				<!-- <div class="form-group">
					<div class="col-sm-offset-2 col-sm-6">
						<div class="checkbox">
							<label><input type="checkbox"><i></i> 设为默认收货地址</label>
						</div>
					</div>
				</div> -->
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-6">
						<button type="submit" class="but" id='add'>保存</button>
					</div>
				</div>
				<script src="/index/js/jquery.citys.js"></script>
				<script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script>
				<script>
					$(document).ready(function(){
						// 添加街道/乡镇
						function townFormat(info){
							$('.addr-linkage select[name="town"]').hide().empty();
							if (info['code'] % 1e4 && info['code'] < 7e6){	//是否为“区”且不是港澳台地区
								var ajaxConfig = {
									url: 'http://passer-by.com/data_location/town/' + info['code'] + '.json',
									scriptCharset:'UTF-8',
									dataType: "json",
									timeout: 4000,
									success: function(data) {
										$('.addr-linkage select[name="town"]').show();
										// $('#code').val(info['code']) // 填地区编码
										for (i in data) {
											$('.addr-linkage select[name="town"]').append(
												'<option value="' + data[i] + '">' + data[i] + '</option>'
											);
										};
										// $('.addr-linkage select[name="town"]').find('option[value="洪山镇"]').prop("selected", "selected");
									},
								};
								$.ajax(ajaxConfig).fail(function(p1,p2,p3){
									ajaxConfig.url = 'js/data_location/town/' + info['code'] + '.json';
									$.ajax(ajaxConfig)
								});
							}
						};
						$('.addr-linkage').citys({
							// 如果某天这个仓库地址失效了dataUrl请使用本地 2017.10 的数据 'js/data_location/list.json'
							dataUrl: 'http://passer-by.com/data_location/list.json',
							spareUrl: 'js/data_location/list.json',
							dataType: 'json',
							valueType: 'name',
							province: '山西省',
							city:'运城市',
							area: '盐湖区',
							town: '中城街道',
							onChange: function(data) {
								townFormat(data)
							},
						},function(api){
							var info = api.getInfo();
							townFormat(info);
						});
					}); 
				</script>

				<script>
				    //添加
					$('#add').click(function(){
						if($('#name').val() && $('#details').val() && $('#tel').val()){
							$.ajax({
								url:'/index/vip/udai_address_insert',
								type:'POST',
								data:$('#form').serialize(),
				                success:function(data){
				                    // window.parent.location.reload();
				                    if(data==1){
				                        layer.msg('添加成功',{'icon':1});
				                    }else{
				                        layer.msg('添加失败',{'icon':2});
				                    }
				                    window.location.reload();
				                }
				            }).fail(function(){
				                layer.msg('请正确填写信息');
							})
						}
					})
			    </script>

			    <script>
			    	//删除
			    	function del(ids){

			    		if(typeof ids!='object' & ids!='none'){
				            arr=new Array();
				            arr[0]=ids.toString(); // 将数字转为数组
				            ids=arr;
				        }

			    		if (ids!=='none') {
			                layer.confirm('你确定要删除吗？', {
			                    btn: ['删除','取消']
			                }, function(){
			                    // ajax传输数据并响应
			                    $.post("/index/vip/udai_address_del",{"_method":"DELETE","ids":ids},function(data){
			                        if (data == 1) {
			                            layer.msg('删除成功', {icon: 1});
			                        }else{
			                            layer.msg('删除失败',{icon: 2});
			                        }
			                    })
			                    window.location.reload();
			                }, function(){
			                    layer.msg('已取消',{icon: 2});
			                });
			            }

			        }
			    </script>
			</form>
			<p class="fz18 cr">已保存的有效地址</p>

			<div class="table-thead addr-thead">
				<div class="tdf1">收货人</div>
				<div class="tdf2">所在地</div>
				<div class="tdf2"><div class="tdt-a_l">详细地址</div></div>
				<div class="tdf1">电话/手机</div>
				<div class="tdf2">操作</div>
				<!-- <div class="tdf1"></div> -->
			</div>
			<div class="addr-list">
				@foreach($arr as $list)
				<div class="addr-item">
					<div class="tdf1">{{$list->cnee}}</div>
					<div class="tdf1">{{$list->address}}</div>
					<div class="tdf2">{{$list->details}}</div>
					<div class="tdf1">{{$list->tel}}</div>
					<div class="tdf1 order">
						<a href="/index/vip/udai_address_edit?id={{$list->id}}" class='glyphicon glyphicon-pencil edit' title='修改' style="color:#777;"></a>
						<a href="javascript:;" class='glyphicon glyphicon-trash del' onclick="del({{$list->id}})" title='删除' style="color:#777;"></a>
					</div>
					<!-- <div class="tdf1">
						<a href="/index/" class="default active ">默认地址</a>
					</div> -->
				</div>
				@endforeach


			</div>
			
		</div>
	</div>
@endsection